<template>
  <div class="container">
    <van-radio-group v-model="radio" @change="onChange" direction="horizontal">
      <van-radio use-icon-slot name="1">
        <div class="flex">
          <uni-icons style="margin-top: 2rpx" color="#ff4d03" v-if="radio == '1'" type="circle-filled" size="20"></uni-icons>
          <uni-icons style="margin-top: 2rpx" color="#DDDDDD" v-else type="circle" size="20"></uni-icons>
          <text class="radio_text">
            建议
          </text>
        </div>
      </van-radio>
      <van-radio use-icon-slot name="2">
        <div class="flex">
          <uni-icons style="margin-top: 2rpx" color="#ff4d03" v-if="radio === '2'" type="circle-filled" size="20"></uni-icons>
          <uni-icons style="margin-top: 2rpx" color="#DDDDDD" class="circle" v-else type="circle" size="20"></uni-icons>
          <text class="radio_text">
            缺陷
          </text>
        </div>
      </van-radio>
    </van-radio-group>
  </div>
</template>

<script>
export default {
  name: "feedback",
  data() {
    return {
      radio:'1'
    }
  },
  onShow() {

  },
  onLoad(option) {

  },
  methods: {
    onChange(event){
      console.log(event)
      this.radio=event.detail
    }
  }
}
</script>

<style scoped>
.container{
  width: 750rpx;
  min-height: 100vh;
  background: #fafafa;
  padding: 48rpx 32rpx;
  box-sizing: border-box;
}
.radio_text{
  margin-left: 4rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
</style>
